<script setup lang="ts">
import { deleteUser, getUserInfoList } from '@/api/user';
import type { User, UserInfo } from '@/api/user/type';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, ref } from 'vue';
import YUserInfoEdit from './components/YUserInfoEdit.vue';
import YPasswordEdit from './components/YPasswordEdit.vue';
import type { Role, UserRole } from '@/api/auth/type';
import { addOneUserRole, getRoleList } from '@/api/auth';

const tableData = ref([] as UserInfo[]);
const drawer = ref(false);
const item = ref({} as UserInfo);
const dialogVisible = ref(false);
const roleList = ref([] as Role[]);
const dialogFormVisible = ref(false);
const userRole = ref({} as UserRole);

onMounted(() => {
    refresh();
})

const refresh = () => {
    getUserInfoList().then((res) => {
        tableData.value = res as UserInfo[];
    });
    getRoleList().then((res) => {
        roleList.value = res.data as Role[];
    });
}

const openDelete = (userId: string) => {
    ElMessageBox.confirm('你确认要继续删除该用户吗？','确认删除',{
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        await deleteUser(userId);
        refresh();
    })
    .catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除！',
        })
    })
}

const openEdit = (userInfo: UserInfo) => {
    item.value = userInfo;
    drawer.value = true;
}

const resetPassword = (userInfo: UserInfo) => {
    item.value = userInfo;
    dialogVisible.value = true;
}

const addUserRole = () => {
    addOneUserRole(userRole.value).then((res) => {
        if (res.code === 5200) {
            ElMessage.success(res.msg);
        } else {
            ElMessage.error("错误码:"+res.code+"\n错误信息: "+res.msg);
        }
    });
    dialogFormVisible.value = false;
}

</script>

<template>
    <div class="content">
        <div class="header">
            <el-button @click="dialogFormVisible = true" type="primary">
                用户添加角色
            </el-button>
            <el-dialog v-model="dialogFormVisible" title="用户添加角色" width="500">
                <el-form :model="userRole" label-width="auto" style="max-width: 300px">
                    <el-form-item label="用户名">
                        <el-select v-model="userRole.userId" placeholder="请选择用户">
                            <el-option v-for="userInfo in tableData" :label="userInfo.nickname" :value="userInfo.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="角色名">
                        <el-select v-model="userRole.roleName" placeholder="请选择角色">
                            <el-option v-for="role in roleList" :lable="role.name" :value="role.name"/>
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" @click="addUserRole">确认</el-button>
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
        <el-table :data="tableData" style="width: 100%" stripe border>
            <el-table-column prop="nickname" label="昵称" />
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="roleCode" label="角色名" />
            <el-table-column prop="sex" label="性别" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="phone" label="电话" />
            <el-table-column label="状态">
                <template #default="scope">
                    <el-button type="success" v-if="scope.row.status === 1">正常</el-button>
                    <el-button type="warning" v-else>停用</el-button>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="openDelete(scope.row.id)">删除</el-button>
                    <el-button link type="primary" size="small" @click="openEdit(scope.row)">修改</el-button>
                    <el-button link type="primary" size="small" @click="resetPassword(scope.row)">重置密码</el-button>
                </template>
            </el-table-column>
        </el-table>
        <YUserInfoEdit v-model:userInfo="item" v-model:drawer="drawer"></YUserInfoEdit>
        <YPasswordEdit v-model:dialog-visible="dialogVisible" :id="item.id"></YPasswordEdit>
    </div>
</template>

<style lang="scss" scoped>
.content {
    background-color: white;
    padding: 1%;
    .header {
        padding: 1%;
    }
}
</style>